<template>
  <div class="home">
      <div class="home_nav">振涛教育考务管理后台</div>
      <div class="home_buttom">
        <div class="home_tt">
          <div class="hoem_buttom_left">
            <el-row class="tac">
              <el-col :span="20">
                <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose">
                  <el-submenu index="1">
                    <template slot="title">
                      <i class="el-icon-location"></i>
                      <span>导航一</span>
                    </template>
                    <el-menu-item-group>
                      <template slot="title">分组一</template>
                      <el-menu-item index="1-1">选项1</el-menu-item>
                      <el-menu-item index="1-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                      <el-menu-item index="1-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="1-4">
                      <template slot="title">选项4</template>
                      <el-menu-item index="1-4-1">选项1</el-menu-item>
                    </el-submenu>
                  </el-submenu>
                  <el-menu-item index="2">
                    <i class="el-icon-menu"></i>
                    <span slot="title">导航二</span>
                  </el-menu-item>
                  <el-menu-item index="3" disabled>
                    <i class="el-icon-document"></i>
                    <span slot="title">导航三</span>
                  </el-menu-item>
                  <el-menu-item index="4">
                    <i class="el-icon-setting"></i>
                    <span slot="title">导航四</span>
                  </el-menu-item>
                </el-menu>
              </el-col>
            </el-row>
          </div>
          <div class="hoem_buttom_right">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>活动管理</el-breadcrumb-item>
              <el-breadcrumb-item>活动列表</el-breadcrumb-item>
              <el-breadcrumb-item>活动详情</el-breadcrumb-item>
            </el-breadcrumb>
            <router-view/>
        </div>
        </div>
      </div>
  </div>
</template>

<script>
  export default {
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>
<style scoped>
  .home{
   width: 100%;
   height: 100vh;
   position: relative;
    
   left: 0;
   top: 0;
  }
  .home_tt{
    width: 95%;
    height: 90%;
    background:  #fff;
    margin: 30px auto;
  }
  .home_nav{
    width: 100vw;
    height: 60px;
    background: #001529 ;
    color: #fff;  
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .home_buttom{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    padding-top: 60px;
    box-sizing: border-box;
    left: 0;
     background: #F0F2F5;
    
    
  }
  .hoem_buttom_left{
    height: 100%;
    width: 20%;
    float: left;
  }
  .hoem_buttom_right{
    padding-right: 30px;
    height: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    box-sizing: border-box;
    float: left;
    width: 80%;
  }
</style>
